<template>
	<view class="main credit ">
		<view class="credit_top credit_mb">
			<view class="left">
				<view>
					账号充值
				</view>
				<view>
					我的余额：-1元
				</view>
			</view>
			<view class="right">
				<image src="../../static/image/1.png"></image>
			</view>
		</view>
		<view class="credit_c credit_mb">
			<view class="title">
				充值积分
			</view>
			<view class="titlex">
				<view class="jil" @click="cjil" data-jil="1" :class="{ active:isActive_jil==1}">
					<view class="jil1">
						1000
					</view>
					<view class="jil2">
						10元
					</view>
				</view>
				<view class="jil" @click="cjil" data-jil="2" :class="{ active:isActive_jil==2}">
					<view class="jil1">
						2000
					</view>
					<view class="jil2">
						20元
					</view>
				</view>
				<view class="jil" @click="cjil" data-jil="3" :class="{ active:isActive_jil==3}">
					<view class="jil1">
						3000
					</view>
					<view class="jil2">
						30元
					</view>
				</view>
			</view>
		</view>
		<view class="credit_b credit_mb">
			<view class="title">
				选择支付方式
			</view>
			<view class="titlex" >
				<view class="paytype" :class="{ active:isActive_pay}" @click="cpaytype" data-paytype="1">
					<image src="../../static/img/alipay.png" mode=""></image>
				</view>
				<view class="paytype" :class="{ active:!isActive_pay}" @click="cpaytype" data-paytype="2">
					<image src="../../static/img/wechat.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="credit_bx">
			<view class="btn">
				立即充值
			</view>
			<view class="tips huis">
				点击立即充值，即表示您已同意<view class="agreement" @click="agreement">协议</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paytype:1,
				isActive_jil:1,
				jil:1,
				isActive_pay:true,
			}
		},
		methods: {
			agreement(){
				this.api.webUrl('https://www.baidu.com');
			},
			cpaytype(e){
				this.paytype = e.currentTarget.dataset.paytype;
				this.isActive_pay = !this.isActive_pay;
			},
			cjil(e){
				this.jil = e.currentTarget.dataset.jil;
				this.isActive_jil = this.jil;
			}
		}
	}
</script>

<style>
page{background: #FFFFFF;}
.credit{margin: 0 20rpx;}
.tips{}
.credit_top{display: flex;}
.credit_top>view{flex: 1;}
.credit_top .right{height: 200rpx;}
.credit_top .right image{width: 100%;height: 100%;}
.title{line-height: 100rpx;height: 100rpx;padding-left: 20rpx;font-weight: 600;}
.credit_c .titlex{display: flex;flex-wrap: wrap;}
.credit_c .titlex>view{border-radius: 20rpx;width: 31%;margin: 1%;text-align: center;height: 120rpx;background-color: #f1f1f1;}
.credit_b .titlex{display: flex;}
.credit_c .titlex>view.active{background-color: #f39d33;}
.credit_b .active{background-color: #f1f1f1;}
.credit_b .titlex .paytype{flex: 1;margin: 0 20rpx;border-radius: 20rpx;}
.credit_mb{margin-bottom: 60rpx;}
.paytype image{width: 300rpx;height: 100rpx;}
.credit_bx .btn{line-height: 100rpx;background-color: #FB7D5A;border-radius: 20rpx;text-align: center;
font-weight: 600;font-size: 16px;margin: 20rpx;}
.credit_bx .tips{text-align: center;margin-bottom: 20rpx;}
.credit_bx .tips view{display: inline-block;}
.jil1{font-size: 20px;}
.jil{padding: 10rpx 0;}
.jil2{font-size: 16px;color: #c33dbf;}
</style>
